<template>
  <div class="invoice">
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.orderSn"
            placeholder="请输入订单号"
            style="width:200px"
            clearable
            @change="handlergetInvLIst"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.invCode"
            placeholder="请输入发票代码"
            style="width:200px"
             clearable
            @change="handlergetInvLIst"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.invNumber"
            placeholder="请输入发票号码"
            style="width:200px"
             clearable
            @change="handlergetInvLIst"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.invStatus"
            placeholder="请选择发票状态"
             clearable
            @change="handlergetInvLIst"
          >
            <el-option
              v-for="item in invStatusList"
              :label="item.name"
              :value="item.invStatus"
              :key="item.invStatus"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <!-- <el-select v-model="formInline.invKind" placeholder="请选择发票样式">
            <el-option
              v-for="item in invStatus"
              :label="item.name"
              :value="item.invKind"
              :key="item.invKind"
            ></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.invKind" placeholder="请选择发票类型"  clearable
            @change="handlergetInvLIst">
            <el-option
              v-for="item in invKindList"
              :label="item.name"
              :value="item.invKind"
              :key="item.invKind"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="invoiceData"
            class="work_date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handlerinvoiceData"
            placeholder="选择开票日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
        <el-date-picker
            v-model="invoiceshen"
            class="work_date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handlerinvoiceShen"
            placeholder="选择申请日期"
          ></el-date-picker>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="succes">导出Excel</el-button>
        </el-form-item>
      </el-form>
      <h4 style="margin:40px 0">发票列表</h4>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="orderSn" label="订单号" width="180">
        </el-table-column>
        <el-table-column prop="invStatus" label="发票状态">
          <template slot-scope="scoped">
            <div>
              <el-link
                v-if="scoped.row.invStatus == 3"
                :underline="false"
                type="info"
                >已开票</el-link
              >
              <el-link
                v-if="scoped.row.invStatus == 2"
                :underline="false"
                type="danger"
                >拒绝开票</el-link
              >
              <el-link
                v-if="scoped.row.invStatus == 1"
                :underline="false"
                type="success"
                >申请中</el-link
              >
              
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="vbrk" label="发票抬头"> </el-table-column>
        <el-table-column prop="name" label="发票详情">
          <template slot-scope="scoped">
            <div>
              <el-link :underline="false" type="primary"  @click="handlerdetial(scoped.row)">详情</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="invPrice" label="发票金额"> </el-table-column>
        <el-table-column prop="invType" label="发票样式">
          <template slot-scope="scoped">
            <div>
              <el-tag v-if="scoped.row.invType == 1" type="success"
                >电子</el-tag
              >
              <el-tag v-if="scoped.row.invType == 2" type="warning"
                >纸质</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="applyName" label="申请人"> </el-table-column>
        <el-table-column prop="apply_time" label="申请日期" width="170"> </el-table-column>
        <el-table-column prop="drawerName" label="开票人">
          <template slot-scope="scopedd">
            <div v-if="scopedd.row.drawerName!=null">
              {{
                String(scopedd.row.drawerName).length > 2
                  ? String(scopedd.row.drawerName)
                      .split(",")
                      .splice(0, 2)
                      .join(",")
                  : scopedd.row.drawerName
              }}
            </div>
            <div v-else>
          暂无数据
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="drawerTime" label="开票日期" width="170">
          <template slot-scope="scoped">
            <div v-if="scoped.row.drawerTime!=null">
              {{
                String(scoped.row.drawerTime).length > 2
                  ? String(scoped.row.drawerTime)
                      .split(",")
                      .splice(0, 2)
                      .join(",")
                  : scoped.row.drawerTime
              }}
             
            </div>
             <div v-else>
              暂无数据
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="240">
          <template slot-scope="scoped">
            <div>
              <el-link
                :underline="false"
                type="primary"
                @click="handlergetInvoiceOne(scoped.row)"
                style="margin-right:10px"
                >开票</el-link
              >
              <el-link
                :underline="false"
                type="danger"
                @click="handlerNo(scoped.row)"
                style="margin-right:10px"

                >拒绝开票</el-link
              >
              <el-link
                :underline="false"
                type="success"
                @click="handlerdetial(scoped.row)"
                >查看</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="margin-bottom: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="formInline.pageSize"
          :current-page="formInline.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
      <!-- 发票详情 -->
      <el-dialog
        title="发票详情"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <div class="invoce_dialog">
          <div class="invoce_left">
            <div v-if="InvDetailList.invStatus==2">
              拒绝理由:
              <el-link :underline="false" type="danger">{{InvDetailList.refuseReason}}</el-link>
            </div>

            <div>
              发票状态: {{InvDetailList.invStatus==1?"申请中":InvDetailList.invStatus==2?"拒绝开票":"已开票"}}
            </div>
            <div>
              申请人:{{InvDetailList.applyName==""?"无":InvDetailList.applyName}}
            </div>
            <div>
              申请日期:{{InvDetailList.apply_time==""?"无":InvDetailList.apply_time}}
            </div>
          
            <div>
            订单编号:{{InvDetailList.orderSn==""?"无":InvDetailList.orderSn}}
            </div>
            <div>
              抬头类型:{{InvDetailList.vbrkType==1?"个人":"企业"}}
            </div>
            <div>
              发票抬头:{{InvDetailList.vbrk==""?"无":InvDetailList.vbrk}}
            </div>
            <div>
              税号:{{InvDetailList.taxpayerCode==""?"无":InvDetailList.taxpayerCode}}
            </div>
            <div>
              发票样式:{{InvDetailList.invType==1?"电子":"纸质"}}
            </div>
            <div>
              发票类型:{{InvDetailList.invKind==1?"普票":"专票"}}
            </div>
            <div>
              发票内容:{{InvDetailList.remark==""?"无":InvDetailList.remark}}
            </div>
            <div>
              公司地址:{{InvDetailList.setAddrDetail==""?"无":InvDetailList.setAddrDetail}}
            </div>
            <div>
              公司电话:{{InvDetailList.setPhone==""?"无":InvDetailList.setPhone}}
            </div>
            <div>
              银行账户:{{InvDetailList.bankAccount==""?"无":InvDetailList.bankAccount}}
            </div>
            <div>
              开户银行:{{InvDetailList.bank==""?"无":InvDetailList.bank}}
            </div>
          </div>
          <div class="invoce_right">
            <h3 style="margin-bottom:40px">发票张数:{{MakeInvList.length==0?0:MakeInvList.length}}</h3>
              <div v-for="item in MakeInvList" :key="item.id" style="margin-bottom:20px">
                <div class="invoce_right_top">
                <div style="margin-right:40px">
              开票人:{{item.drawerName}}
            </div>
            <div>
              开票日期:{{item.add_time}}
            </div>
            </div>
            <div class="invoce_right_item">
              <div>发票代码:{{item.invCode}}</div>
              <div>发票号码:{{item.invNumber}}</div>
              <div>发票金额:{{item.invPrice}}</div>
            </div>
              </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 发票模版 -->
      <el-dialog
        title="添加发票模版"
        :visible.sync="addInvoicedialogVisible"
        width="30%"
        :before-close="handleaddInvoiceClose"
      >
        <el-form
          :model="addForm"
          :rules="addrules"
          ref="addruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="抬头类型" prop="vbrkType">
            <el-select v-model="addForm.vbrkType" placeholder="请选择抬头类型">
              <el-option
                v-for="item in vbrkTypeList"
                :label="item.name"
                :value="item.vbrkType"
                :key="item.vbrkType"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发票抬头" prop="vbrk">
            <el-input
              v-model="addForm.vbrk"
              placeholder="请输入发票抬头"
            ></el-input>
          </el-form-item>

          <el-form-item label="纳税人识别号" prop="taxpayerCode">
            <el-input
              v-model="addForm.taxpayerCode"
              placeholder="请输入纳税人识别号"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户银行" prop="bank">
            <el-input
              v-model="addForm.bank"
              placeholder="请输入开户银行"
            ></el-input>
          </el-form-item>
          <el-form-item label="	银行账号" prop="bankAccount">
            <el-input
              v-model="addForm.bankAccount"
              placeholder="请输入银行账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业地址" prop="businessAddress">
            <el-input
              v-model="addForm.businessAddress"
              placeholder="请输入企业地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业电话" prop="businessPhone">
            <el-input
              v-model="addForm.businessPhone"
              placeholder="请输入企业电话"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addInvoicedialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlerSureAdd">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 开发票-->
      <el-dialog
        title="开发票"
        :visible.sync="openInvoicedialogVisible"
        width="30%"
        :before-close="handleopenInvoiceClose"
      >
        <el-form
          :model="openForm"
          :rules="openrules"
          ref="openruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="	发票金额" prop="invPrice">
            <el-input
              v-model="openForm.invPrice"
              placeholder="请输入发票金额"
            ></el-input>
          </el-form-item>
          <el-form-item label="发票代码" prop="invCode">
            <el-input
              v-model="openForm.invCode"
              placeholder="请输入发票代码"
            ></el-input>
          </el-form-item>
          <el-form-item label="	发票号码" prop="invNumber">
            <el-input
              v-model="openForm.invNumber"
              placeholder="请输入发票号码"
            ></el-input>
          </el-form-item>
                <el-form-item label="	发票抬头" prop="vbrk">
            <el-input
              v-model="openForm.vbrk"
              placeholder="请输入发票抬头"
            ></el-input>
          </el-form-item>
                <el-form-item label="	发票类型" prop="invKind">
            <el-select v-model="openForm.invKind" placeholder="请选择抬头类型">
              <el-option
                v-for="item in invKindList"
                :label="item.name"
                :value="item.invKind"
                :key="item.invKind"
              ></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="发票照片" prop="invImg">
            <ele-upload-image
              action="/Upload"
              v-model="openForm.invImg"
              :lazy="true"
              :fileType="['png', 'jpg', 'jpeg']"
              :responseFn="handleResponse"
            ></ele-upload-image>
          </el-form-item>
        </el-form>
        <el-link
          type="primary"
          @click="handlershowEdit"
          style="margin-left:40px;margin-bottom:20px"
          >发票模版</el-link
        >
        <!-- 发票模版 -->
        <el-form
          :model="addForm"
          :rules="addrules"
          ref="addruleForm"
          label-width="110px"
          class="demo-ruleForm"
          v-if="showEditInvoice"
        >
          <el-form-item label="抬头类型" prop="vbrkType">
            <el-select v-model="addForm.vbrkType" placeholder="请选择抬头类型">
              <el-option
                v-for="item in vbrkTypeList"
                :label="item.name"
                :value="item.vbrkType"
                :key="item.vbrkType"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发票抬头" prop="vbrk">
            <el-input
              v-model="addForm.vbrk"
              placeholder="请输入发票抬头"
            ></el-input>
          </el-form-item>

          <el-form-item label="纳税人识别号" prop="taxpayerCode">
            <el-input
              v-model="addForm.taxpayerCode"
              placeholder="请输入纳税人识别号"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户银行" prop="bank">
            <el-input
              v-model="addForm.bank"
              placeholder="请输入开户银行"
            ></el-input>
          </el-form-item>
          <el-form-item label="	银行账号" prop="bankAccount">
            <el-input
              v-model="addForm.bankAccount"
              placeholder="请输入银行账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业地址" prop="businessAddress">
            <el-input
              v-model="addForm.businessAddress"
              placeholder="请输入企业地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业电话" prop="businessPhone">
            <el-input
              v-model="addForm.businessPhone"
              placeholder="请输入企业电话"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="openInvoicedialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlermakeInvoice"
            >确定开票</el-button
          >
          <el-button type="primary" @click="handlerEditInvoice"
            >确定修改发票</el-button
          >
        </span>
      </el-dialog>
      <!-- 拒绝发票 -->
      <el-dialog
        title="拒绝开票"
        :visible.sync="nodialogVisible"
        width="30%"
        :before-close="handleCloseNO"
      >
        <el-form
          :model="NoruleForm"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="拒绝理由" prop="refuseReason">
            <el-input
              type="textarea"
              :rows="7"
              v-model="NoruleForm.refuseReason"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="nodialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlersureNo">确 定</el-button>
        </span>
      </el-dialog>


    </el-card>
  </div>
</template>

<script>
import {
  getInvLIst,
  getInvoiceOne,
  insertInv,
  makeInvoice,
  refuseInvoice,
  updateInv,
  getInvDetail
} from "../../utils/api";

export default {
  data() {
    return {
      formInline: {
        pageNumber: 1,
        pageSize: 10,
        orderSn: "",
        invCode: "",
        invNumber: "",
        invStatus: "",
        invKind: "",
        applyStaTime: "",
        applyEndTime: "",
        makeStaTime: "",
        makeEndTime: ""
      },
      tableData: [],
      count: 0,
      dialogVisible: false,
      invoicedata: [],
      invStatusList: [
        {
          name: "申请中",
          invStatus: 1
        },
        {
          name: "拒绝开票",
          invStatus: 2
        },
        {
          name: "已开票",
          invStatus: 3
        }
      ],
      invKindList: [
        {
          name: "普票",
          invKind: 1
        },
        {
          name: "专票",
          invKind: 2
        }
      ],
      vbrkTypeList: [
        {
          name: "个人",
          vbrkType: 1
        },
        {
          name: "企业",
          vbrkType: 2
        }
      ],
      //添加发票模版
      addInvoicedialogVisible: false,
      //开发票
      openInvoicedialogVisible: false,
      // 拒绝发票
      nodialogVisible: false,
      // 添加发票的数据
      addForm: {
        vbrkType: "",
        vbrk: "",
        taxpayerCode: "",
        bank: "",
        bankAccount: "",
        businessAddress: "",
        businessPhone: "",
        invId: ""
      },
      //开发票的数据
      openForm: {
        orderInvId: "",
        invPrice: "",
        invCode: "",
        invNumber: "",
        invImg:"",
        invKind:"",
        vbrk:""
      },
      // 拒绝开票
      NoruleForm: {
        orderInvId: "",
        refuseReason: ""
      },
      addrules: {
        vbrkType: [
          { required: true, message: "请选择抬头类型", trigger: "change" }
        ],
        vbrk: [
          { required: true, message: "请输入发票抬头", trigger: "change" }
        ],
        taxpayerCode: [
          { required: true, message: "请输入纳税人识别号", trigger: "change" }
        ],
        bank: [
          { required: true, message: "请输入开户银行", trigger: "change" }
        ],
        bankAccount: [
          { required: true, message: "请输入银行账号", trigger: "change" }
        ],
        businessAddress: [
          { required: true, message: "请输入企业地址", trigger: "change" }
        ],
        businessPhone: [
          { required: true, message: "请输入企业电话", trigger: "change" }
        ]
      },
      openrules: {
        invPrice: [
          { required: true, message: "请输入发票金额", trigger: "change" }
        ],
        invCode: [
          { required: true, message: "请输入发票代码", trigger: "change" }
        ],
        invNumber: [
          { required: true, message: "请输入发票号码", trigger: "change" }
        ],
          invImg: [
          { required: true, message: "请上传发票图片", trigger: "change" }
        ],
          invKind: [
          { required: true, message: "请选择发票类型", trigger: "change" }
        ],
          vbrk: [
          { required: true, message: "请输入发票抬头", trigger: "change" }
        ],
      },
      // 是否显示编辑发票
      showEditInvoice: false,
      invoiceData: "",
      invoiceshen:"",
      orderSn:'', //订单号
      InvDetailList:"", //发票详情--左侧
      MakeInvList:[], //发票详情--右测
    };
  },
  created() {
    this.handlergetInvLIst();
  },

  methods: {
    
    // 选择开票日期
    handlerinvoiceData(value) {
      if (
        this.invoiceData == "" ||
        this.invoiceData == null ||
        this.invoiceData == []
      ) {
        this.formInline.makeStaTime = "";
        this.formInline.makeEndTime = "";
        this.handlergetInvLIst();
      } else {
        this.formInline.makeStaTime = value[0];
        this.formInline.makeEndTime = value[1];
        this.handlergetInvLIst();
      }
    
    },
    // 选择开票申请日期
    handlerinvoiceShen(value) {
      if (
        this.invoiceshen == "" ||
        this.invoiceshen == null ||
        this.invoiceshen == []
      ) {
        this.formInline.applyStaTime = "";
        this.formInline.applyEndTime = "";
        this.handlergetInvLIst();
      } else {
        this.formInline.applyStaTime = value[0];
        this.formInline.applyEndTime = value[1];
        this.handlergetInvLIst();
      }
    
    },
       handleResponse(response, file, fileList) {
      return (this.openForm.invImg = response.data.src);
    },
    // 获取发票列表
    handlergetInvLIst() {
      this.postRequest(getInvLIst, this.formInline).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.count = res.data.count;
        }
      });
    },
    // 点击获取发票详情
    handlergetInvDetail(){
      this.postRequest(getInvDetail,{
        orderSn:this.orderSn
      }).then(res=>{
        if(res.code==200){
          this.InvDetailList=res.data.InvDetail
          this.MakeInvList=res.data.MakeInv

        }
      })
    },
    // 获取开票信息(用于开票前判断)
    handlergetInvoiceOne(row) {
      this.openForm.orderInvId = row.id;

      this.postRequest(getInvoiceOne, {
        vbrkType: 2
      }).then(res => {
        if (res.code == 200&&res.data.length!=0) {
          //有发票模版 直接去开票
          this.openInvoicedialogVisible = true;
          this.addForm.invId = res.data.id;
          this.addForm.vbrkType = res.data.vbrkType;
          this.addForm.vbrk = res.data.vbrk;
          this.addForm.taxpayerCode = res.data.taxpayerCode;
          this.addForm.bank = res.data.bank;
          this.addForm.bankAccount = res.data.bankAccount;
          this.addForm.businessAddress = res.data.businessAddress;
          this.addForm.businessPhone = res.data.businessPhone;
        } else {
          //没有发票模版 需要去添加发票模版 在开票
          this.addInvoicedialogVisible = true;
        }
      });
    },
    // 点击 显示编辑发票
    handlershowEdit() {
      this.showEditInvoice = !this.showEditInvoice;
    },
    // 点击拒绝开票 显示
    handlerNo(row) {
      this.NoruleForm.orderInvId = row.id;
      this.nodialogVisible = !this.nodialogVisible;
    },
    // 发票详情-----弹框
    handleClose() {
      this.dialogVisible = false;
    },
    // 添加发票模版-----弹框
    handleaddInvoiceClose() {
      this.addInvoicedialogVisible = false;
    },
    // 开发票-----弹框
    handleopenInvoiceClose() {
      
      this.openForm.invPrice='';
      this.openForm.invCode='';
      this.openForm.invNumber='';
      this.openForm.invImg='';

      
      this.openInvoicedialogVisible = false;
    },
    //点击查看详情
    handlerdetial(row) {
      this.orderSn=row.orderSn
      this.dialogVisible = !this.dialogVisible;
      this.handlergetInvDetail()
    },
    // 点击拒绝发票
    handleCloseNO() {
      this.nodialogVisibl = false;
    },
    // 点击确定添加发票模版
    handlerSureAdd() {
      this.postRequest(insertInv, this.addForm).then(res => {
        if (res.code == 200) {
          this.$message.success("添加发票模版成功 请重新开票");
          this.addInvoicedialogVisible = false;
        }
      });
    },
    // 点击确定 开票
    handlermakeInvoice() {
      this.postRequest(makeInvoice, this.openForm).then(res => {
        if (res.code == 200) {
          this.$message.success("该订单开票成功");
          this.openInvoicedialogVisible = false;
          this.handlergetInvLIst();
        }
      });
    },
    // 点击确定修改发票
    handlerEditInvoice() {
      this.postRequest(updateInv, this.addForm).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑发票模版成功 继续开票");
          this.showEditInvoice = false;
        }
      });
    },
    // 点击确定拒绝发票
    handlersureNo() {
      this.postRequest(refuseInvoice, this.NoruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.handlergetInvLIst();
        }
      });
    },
    //商品的分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.handlergetInvLIst();
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.handlergetInvLIst();
    }
  }
};
</script>

<style lang="less" scoped>
.invoice {
  .invoce_dialog {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .invoce_left {
      line-height: 40px;
    }
    .invoce_right {
      .invoce_right_top{
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
      }
      .invoce_right_item {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #000000;
        padding-bottom: 10px;
        div {
          margin-right: 30px;
        }
      }
    }
  }
}
</style>
